/*
 * Copyright © 2018 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import '~styles/variables.scss';
@import '~components/PipelineList/DraftPipelineView/DraftPipelineViewVariables.scss';

$table-bg-color: $grey-08;
$row-hover-color: white;
$row-color: $grey-01;

$status-width: 20%;
$type-width: 20%;
$last-saved-width: 20%;
$action-width: 60px;

.draft-table.grid-wrapper {
  background-color: $table-bg-color;
  padding: 0 4px;
  height: calc(100% - #{$header-height});

  .grid.grid-container {
    max-height: 100%;

    .grid-header {
      background-color: $table-bg-color;

      .sortable {
        cursor: pointer;
      }

      > .grid-row {
        border-width: 3px;

        .fa.fa-lg {
          vertical-align: top;
          margin-left: 5px;
        }
      }
    }

    .grid-row {
      grid-template-columns: 1fr $status-width $type-width $last-saved-width $action-width;

      > div {
        padding-top: 5px;
        padding-bottom: 5px;
      }

      > * {
        &:first-child {
          padding-left: 25px;
        }

        &:last-child {
          padding-right: 25px;
        }
      }
    }

    .grid-body .grid-row {
      color: $row-color;

      &:hover {
        background-color: $row-hover-color;
        text-decoration: none;
      }
    }
  }
}
